<template>
  <basic-container>
    <el-form ref="form" searchform :model="searchData" label-width="80px">
      <el-row>
        <el-col :span="5">
          <el-form-item label="文案:" style="margin-bottom: 10px !important;">
            <el-input
              placeholder="请输入文案"
              v-model="searchData.text"
              @clear ='searchForm'
              clearable size="mini" @keyup.enter.native="searchForm">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="解释:" style="margin-bottom: 10px !important;">
            <el-input
              placeholder="请输入解释"
              v-model="searchData.description"
              @clear ='searchForm'
              clearable size="mini" @keyup.enter.native="searchForm">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="语言:" style="margin-bottom: 10px !important;">
            <el-select v-model="searchData.language" filterable placeholder="请选择"
                       clearable size="mini" @change="searchForm">
              <el-option
                v-for="item in languageList"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="媒体:" style="margin-bottom: 10px !important;">
            <el-select v-model="searchData.platform" multiple  placeholder="请选择" size="mini"
                       clearable @change="searchForm">
              <el-option
                v-for="item in platformList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="4" style="min-width: 160px;display:flex;justify-content:flex-end;float: right">
          <el-tooltip class="item" effect="dark" content="展开全部" placement="top">
            <el-button :class="upIcon" class="search-circle" @click="unfoldIcon"
                       style="margin-right: 10px"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="重置" placement="top">
            <el-button id="id-business-customer-emptyForm" :class="emptyIcon" class="search-circle"
                       @click="emptyForm"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="搜索" placement="top">
            <el-button id="id-business-customer-searchForm" ype="primary" icon="el-icon-search" size="small"
                       @click="searchForm" style="margin-right: 0">
              搜索
            </el-button>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row v-show="searchConceal">
        <el-col :span="5">
          <el-form-item label="类型:" style="margin-bottom: 10px !important;">
            <el-select v-model="searchData.category" placeholder="请选择" size="mini"
                       clearable @change="searchForm">
              <el-option label="广告文案" value="广告文案"></el-option>
              <el-option label="素材文案" value="素材文案"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="5">-->
<!--          <el-form-item label="账户:" style="margin-bottom: 10px !important;">-->
<!--            <el-select v-model="searchData.accountId" filterable placeholder="请选择"-->
<!--                       clearable size="mini" @change="searchForm">-->
<!--              <el-option-->
<!--                v-for="(item,index) in accountList"-->
<!--                :key="index"-->
<!--                :label="item.name"-->
<!--                :value="item.platformId">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="5">
          <el-form-item label="创建人:" style="margin-bottom: 10px !important;">
            <el-select v-model="searchData.createUser" placeholder="请选择" size="mini" clearable
                       @keyup.enter.native="searchForm">
              <el-option
                v-for="item in createUserList"
                :key="item"
                :label="item.realName"
                :value="item.createUser">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="5" style="min-width:150px">
          <el-form-item label="创建时间:" style="margin-bottom: 10px !important;">
            <el-date-picker
              v-model="createTime"
              prefix-icon="null"
              type="daterange"
              :clearable="false"
              size="mini"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

        </el-col>
      </el-row>
    </el-form>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               :row-class-name="rowClassNameFn"
               v-model="form"
               ref="crud"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @expand-change="expandChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <div style="display: flex">
          <el-button type="danger"
                     size="small"
                     plain
                     class="button-add-style"
                     style="min-width: 100px"
                     v-if="permission.creativetext_add"
                     @click="handleAdd">新增文案
          </el-button>
          <el-upload
            ref="upload"
            class="upload-demo"
            action="/api/beetles-offer/creative-text/import-excel"
            :headers="headerObj"
            :on-success="onSuccessFile"
            :on-error="onErrorFile"
            :before-remove="beforeRemove"
            accept=".xlsx,.xls"
            :limit="3"
            :data="{offerId:this.offer}"
            :on-exceed="handleExceed"
            :show-file-list="false">
            <el-button size="small" type="primary"
                       style="min-width: 100px;background-color: #ffffff;border-color: #c5c3f2;color: #907be3">导入
            </el-button>
          </el-upload>
          <el-button size="mini" style="border-color: #fed5bf;color: #fea373" @click="downloadTemplate">
            下载导入模板
          </el-button>
        </div>
      </template>
      <template slot-scope="{row,index}" slot="menu">
        <span><i class="el-icon-edit" style="color: #1e9fff;cursor:pointer;"
                                                     @click="upData(row)"></i></span>
        <span><i class="el-icon-delete"
                                                     style="margin-left: 25px;color: #1e9fff;cursor: pointer"
                                                     @click="rowDel(row)"></i></span>
      </template>
      <template slot="expand" slot-scope="{row}">
        <p v-for="(item,index) in row.content2" :key="index">
          <span>{{ item.text }}</span><span>{{ item.language }}</span>
        </p>

      </template>
      <template slot-scope="{row}" slot="platform">
        <div style="display: flex;flex-wrap: wrap;">
          <div style="width: 20px;margin-right: 4px"
               v-for="(item,index) in platformLogo(row.platform)"
               :key="index">
            <img style="width: 100%" :src="item.url" :title="item.name">
          </div>
        </div>
      </template>
    </avue-crud>
    <el-drawer
      ref="drawer"
      :title="title"
      size="70%"
      :visible.sync="drawer"
      direction="rtl"
      :wrapperClosable="false"
      :close-on-press-escape="false"
      :modal="true"
      :append-to-body="true"
      :before-close="handleClose">
      <el-divider></el-divider>
      <el-form :model="textList" :rules="rules" ref="addDataRef">
        <el-row style="margin: auto 0px auto 20px; font-size: 14px;">
          <el-col :span="8">
            文案
          </el-col>
          <el-col :span="6">
            解释
          </el-col>
          <el-col :span="3">
            语言
          </el-col>
          <el-col :span="3">
            类型
          </el-col>
          <el-col :span="3">
            投放媒体
          </el-col>
          <el-col :span="1">

          </el-col>
        </el-row>
        <el-row :gutter="2" style="margin: auto 0px auto 20px;" v-for="(item,index) in textList" :key="index">
          <el-col :span="8">
            <el-input style="display:inline;" v-model="item.text"/>
          </el-col>
          <el-col :span="6">
            <el-input style="display:inline;" v-model="item.description"/>
          </el-col>
          <el-col :span="3">
            <el-select v-model="item.language" placeholder="请选择" filterable style="width: 100%">
              <el-option v-for="(lan_item,lan_index) in languageList" :key="lan_index" :value="lan_item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="item.category" placeholder="请选择" style="width: 100%">
              <el-option label="广告文案" value="0">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="item.platform" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in platformList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1" v-if="index > 0">
            <i class="el-icon-delete" style="margin-left: 10px;margin-top: 15px;cursor:pointer"
               @click="delDrawerRow(index)"></i>
          </el-col>
        </el-row>
      </el-form>
      <div style="margin-top: 20px;margin-left: 20px;" v-if="this.title == '新增文案'">
        <i class="el-icon-circle-plus-outline" style="color: #34acff;font-size: 15px;cursor:pointer;"
           @click="addSelect()"></i>
        <span style="margin-left: 15px;color:#34acff;cursor:pointer;" @click="addSelect()">添加</span>
      </div>
      <div class="div-button">
        <el-button type="primary" plain size="mini" @click="rowSave">保存</el-button>
        <el-button type="primary" plain size="mini" @click="cancel">取消</el-button>
      </div>
    </el-drawer>
  </basic-container>
</template>

<script>
import {getList, getDetail, add, update, remove} from "@/api/offer/creativetext";
import {mapGetters} from "vuex";
import {getSysDictList} from "../../api/system/dict";
import {transformObjectList} from "../../util/util";
import {deepClone} from '@/util/util';
import website from '@/config/website';
import {Base64} from "js-base64";
import {getToken} from "../../util/auth";
import Moment from "moment";
import {createEventHandler} from "../../util/events";
import {getAccountList, getCreateUser} from "../../api/offer/creativetext";
import {platformLogo} from "@/util/beetles";

export default {
  data() {
    return {
      upIcon: 'el-icon-arrow-down',
      searchConceal: false,
      createUserList: [],
      emptyIcon: 'el-icon-delete',
      createTime: [],
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime()>Moment(new Date()).subtract(1,'days')
        // },
        shortcuts: [{
          text: '昨日',
          onClick(picker) {
            const start = Moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD')
            picker.$emit('pick', [start, start])
          }
        }, {
          text: '当周',
          onClick(picker) {
            const weekOfDay = Moment().format('E')
            const start = Moment().subtract(weekOfDay - 1, 'days').format('YYYY-MM-DD')
            const end = Moment().add(7 - weekOfDay, 'days').format('YYYY-MM-DD')
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '上周',
          onClick(picker) {
            const weekOfday = parseInt(Moment().format('E'))
            const start = Moment().subtract(weekOfday - 1 + 7, 'days').format('YYYY-MM-DD')
            const end = Moment(new Date()).subtract(weekOfday, 'days').format('YYYY-MM-DD')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '当月',
          onClick(picker) {
            const end = Moment(new Date()).subtract(-1).format('YYYY-MM-DD')
            const start = Moment().startOf('months').format('YYYY-MM-DD')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上月',
          onClick(picker) {
            const start = Moment().subtract('month', 1).format('YYYY-MM') + '-01'
            const end = Moment(start).subtract('month', -1).add('days', -1).format('YYYY-MM-DD')
            picker.$emit('pick', [start, end])
          }
        }]
      },
      searchData: {
        text: '',
        description: '',
        language: '',
        platform: 'tiktok',
        category: '广告文案',
        offerId: this.offer,
        geo: '',
        accountId: '',
        createUser: '',
        startDate: '',
        endDate: '',
      },
      headerObj: {
        Authorization: `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
        'Blade-Auth': 'bearer ' + getToken()
      },
      platformList: [],
      fileList: [],
      title: "新增文案",
      languageList: [],
      accountList: [],
      textList: [{
        text: '',
        description: '',
        category: '广告文案',
        language: '',
        offerId: this.offer,
        platform: 'tiktok',
      }],
      drawer: false,
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        menuWidth: 100,
        reserveSelection: true,
        tip: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        defaultExpandAll: false,
        column: [
          {
            label: "文案",
            prop: "text",
            overHidden: true,
            width: 300,
            rules: [{
              required: true,
              message: "请输入文案",
              trigger: "blur"
            }]
          },
          {
            label: "解释",
            width: 300,
            prop: "description",
          },
          {
            label: "语言",
            prop: "language",
            rules: [{
              required: true,
              message: "请选择语言",
              trigger: "blur"
            }]
          },
          {
            label: "媒体",
            prop: "platform",
            type: 'select',
            dataType: 'string',
            dicData: [
              {'dictKey': 'tiktok', 'dictValue': 'TikTok'}
            ],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "类型",
            prop: "category",
          },
          {
            label: "创建人",
            prop: "realName",
            addDisplay: false,
            viewDisplay: false,
            editDisplay: false,
          },
          {
            label: "创建时间",
            prop: "createTime",
            width: 150,
            addDisplay: false,
            viewDisplay: false,
            editDisplay: false,
          },
        ]
      },
      data: [],
      rowData: [],
      // 添加表单验证规则
      rules: {
        language: [
          {required: true, message: '请至少选择一个语言', trigger: 'blur'}
        ],
        text: [
          {required: true, message: '文案不能为空', trigger: 'blur'}
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["permission", "offer"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.creativetext_add, false),
        viewBtn: this.vaildData(this.permission.creativetext_view, false),
        delBtn: this.vaildData(this.permission.creativetext_delete, false),
        editBtn: this.vaildData(this.permission.creativetext_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  created() {
    let self = this;
    this.eventHandler = createEventHandler("offerCenter").addListener(
      (event) => {
        console.log("event:" + event)
        if (
          event.message == "offerChanged" &&
          event.offerId &&
          event.offerId !== ""
        ) {
          self.offer = event.offerId;
          self.refreshChange();
        }
      }
    );
    getCreateUser().then(res => {
      this.createUserList = res.data.data
    });
    getAccountList(this.offer).then(res => {
      this.accountList = res.data.data
    });
    getSysDictList('language,platforms').then(map => {
      this.platformList = map['platforms']
      let languageData = transformObjectList(map['language'], [
        {from: 'dictValue', to: 'label'},
      ])
      for (let key in languageData) {
        this.languageList.push(languageData[key].label)
      }

    })
  },
  methods: {
    unfoldIcon() {
      if (this.upIcon === 'el-icon-arrow-down') {
        this.upIcon = 'el-icon-arrow-up'
        this.searchConceal = true
      } else {
        this.upIcon = 'el-icon-arrow-down'
        this.searchConceal = false
      }
    },
    getBlob(url) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };

        xhr.send();
      });
    },
    saveTemplateAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        const link = document.createElement('a');
        const body = document.querySelector('body');

        link.href = window.URL.createObjectURL(blob);
        link.download = filename;

        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);

        link.click();
        body.removeChild(link);

        window.URL.revokeObjectURL(link.href);
      }
    },
    downloadTemplate() {
      let fileUrl = "https://image-origin-bucket.ninesword.com/%E6%96%87%E6%A1%88%E5%BA%93%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
      this.getBlob(fileUrl).then(blob => {
        let offerName = this.$store.state.user.offerName
        this.saveTemplateAs(blob, this.offer + '-' + offerName + "-文案库导入模板.xlsx");
      });
      // let link = document.createElement("a")
      // console.log(link)
      // link.style.display = "none"
      // link.href =
      // document.body.appendChild(link)
      // link.click()
    },
    handleClose() {
      this.drawer = false
      this.textList = [
        {
          text: '',
          description: '',
          category: '',
          language: '',
          platform: '',
        }
      ]
    },
    onErrorFile(err) {
      console.log("upload error:", err, err.method, typeof err)
      this.$message.error("导入失败，请检查导入文件格式是否正确")
      this.$refs.upload.clearFiles();
      this.refreshChange()
    },
    onSuccessFile() {
      this.$message.success("导入成功")
      this.$refs.upload.clearFiles();
      this.refreshChange()
    },
    //搜索
    searchForm() {
      this.refreshChange()
    },
    //清空
    emptyForm() {
      this.searchData = {
        text: '',
        language: '',
        createUser: '',
        startDate: '',
        endDate: '',
      }
      this.createTime = []
      this.refreshChange()
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    delDrawerRow(index) {
      this.textList.splice(index, 1)
    },
    cancel() {
      this.drawer = false
      this.textList = [{
        text: '',
        description: '',
        category: '',
        language: '',
        platform: '',
      }]
    },
    upData(row) {
      this.rowData = row
      this.title = "编辑文案"
      let rowData = deepClone(row)
      this.textList = [rowData]
      this.drawer = true
    },
    addSelect() {
      let index = this.textList.length - 1
      this.rules[`textList.${index}.text`] = [
        {required: true, message: '文案不能为空', trigger: 'blur'}
      ]
      this.rules[`textList.${index}.language`] = [
        {required: true, message: '请至少选择一个语言', trigger: 'change'}
      ]
      this.$refs.form.validate((valid) => {
        if (valid) {
          let item = {
            text: '',
            description: '',
            language: '同上',
            category: '同上',
            platform: '同上'
          }
          this.textList.push(item)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      console.log(this.rules)
    },
    handleAdd() {
      this.drawer = true
      this.title = "新增文案"
    },
    reassignTextList() {
      for (let key in this.textList) {
        this.textList[key]['offerId'] = this.offer
        if (key > 0) {
          if (this.textList[key].language == '同上') {
            let index = key
            while (index > 0) {
              index--;
              if (this.textList[index].language != '同上') {
                this.textList[key].language = this.textList[index].language
                break;
              }
            }
          }
          if (this.textList[key].platform == '同上') {
            let index = key
            while (index > 0) {
              index--;
              if (this.textList[index].platform != '同上') {
                this.textList[key].platform = this.textList[index].platform
                break;
              }
            }
          }
          if (this.textList[key].category == '同上') {
            let index = key
            while (index > 0) {
              index--;
              if (this.textList[index].category != '同上') {
                this.textList[key].category = this.textList[index].category
                break;
              }
            }
          }
        }
      }
    },
    rowSave() {
      this.$refs.addDataRef.validate(async vaild => {
        debugger
        if (!vaild) return
        this.drawer = false
        if (this.textList.length == 0)
          return
        this.reassignTextList(this.textList)

        if (this.title == "新增文案")
          await add(this.textList)
        else
          await update(this.textList[0])
        const res = await getCreateUser()
        this.createUserList = res.data.data
        this.onLoad(this.page)

        this.textList = [{
          text: '',
          description: '',
          category: '广告文案',
          language: '',
          platform: 'tiktok',
        }]
      })
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      if (this.createTime.length != 0) {
        this.searchData.startDate = this.createTime[0]
        this.searchData.endDate = this.createTime[1]
      }
      this.query = this.searchData
      let queryParams = {}
      Object.assign(queryParams,params, this.searchData)
      delete  queryParams.platform;
      queryParams.platform = this.searchData.platform.join(',')
      getList(page.currentPage, page.pageSize, queryParams, this.offer).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    expandChange(row, expendList) {

    },
    // 清楚子行的多选框
    rowClassNameFn({row}) {
      if (!row.hasOwnProperty('parent')) {
        return 'hiddenSelect'
      }
    },
    platformLogo(platform) {
      console.log('platform',platform)
      return platformLogo(platform)
    },
  },
};
</script>

<style scoped>
.button-add-style {
  border-color: #1e88fd;
  color: #1684fd;
  background-color: #ffffff;
  min-width: 80px;
}

.button-Import-style {
  border-color: #9d99e9;
  color: #a17be5;
  background-color: #ffffff;
  min-width: 80px;
}

/deep/ .el-drawer__header > :first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #101010;
  font-weight: 500;
  letter-spacing: 3px;
}

/deep/ .el-drawer__header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #72767b;
  display: flex;
  margin-bottom: 10px;
  padding: 20px 20px 0;
}

/deep/ .el-input--suffix .el-input__inner {
  padding-right: 30px;
  /*width: 145px;*/
}

.div-button {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

/deep/ .el-input-group > .el-input__inner {
  vertical-align: middle;
  display: table-cell;
  width: 380px;
}
</style>

<style lang="scss" scoped>
::v-deep .hiddenSelect {
  td:first-child {
    .cell {
      visibility: hidden;
    }
  }
}

.cs-input {
  width: 70%;
}

.search-div {
  width: 80%;
  height: 200px;
  background-color: #ffffff;
  margin-left: 90px;
  margin-bottom: 10px;
}

::v-deep .el-textarea__inner {
  min-height: 40px !important;
}

/deep/ .el-drawer.rtl {
  overflow: scroll;
}

/deep/ .el-date-editor .el-range-input, .el-date-editor .el-range-separator {
  height: auto;
  overflow: hidden;
  margin-left: -8px;
}

.el-select {
  ::v-deep .el-input__inner {
    width: 100%;
  }
}

/deep/ .el-icon-arrow-up:before {
  margin-left: -80px;
  content: "\e6e1";
}

/deep/ .el-icon-arrow-up:before {
  content: "\e6e1";
  margin-right: -85px;
}
</style>
